<template>
  <!------ 批量操作 弹窗 ------>
  <div>
    <el-dialog
      v-model="isDialogVosble"
      title="批量上传提示"
      width="500"
      draggable
      :before-close="closeDialog"
    >
      <div class="container">
        <span
          >批量上传需要使用预设文件模板，如未下载模板请先点击<el-button
            link
            style="color: #44bd60"
            @click="downloadTemplate"
            >下载模板</el-button
          >进行信息录入后再次上传。</span
        >
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDialog" class="cancel-btn">取消</el-button>

          <el-upload
            ref="upload"
            action=""
            class="keep-upload"
            :auto-upload="false"
            :show-file-list="false"
            accept=".xlsx, .xls"
            :on-change="handleFileChange"
          >
            继续上传
          </el-upload>

         
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, defineEmits, computed } from "vue";

const props = defineProps({ modelValue: { type: Boolean, default: false } });

const emits = defineEmits(["download", "batchUpload", "update:modelValue"]);

const isDialogVosble = computed({
  get: () => props.modelValue,
  set: (val) => {
    emits("update:modelValue", val);
  },
});

/** 关闭弹窗 **/
const closeDialog = () => {
  emits("update:modelValue", false);
};

// 下载模板的方法
function downloadTemplate() {
  emits("download");
}

// 批量上传的文件
function handleFileChange(file) {
  emits("batchUpload", file);
}

</script>

<style lang="scss" scoped>
.container {
  // padding: 0 32px;
  font-size: 14px;
  color: #363636;
}

.cancel-btn {
  width: 108px;
  height: 40px;
  border-radius: 6px 6px 6px 6px;
  border: 1px solid #5974ff;
  font-size: 16px;
  color: #5974ff;
  &:hover {
    background-color: transparent;
  }
  &:focus {
    background-color: transparent;
  }
}

.confirm-btn {
  width: 108px;
  height: 40px;
  background: #5974ff;
  border-radius: 6px 6px 6px 6px;
  font-size: 16px;
  color: #ffffff;
  border: 1px solid #5974ff;
  &:hover {
    color: #ffffff;
  }
  &:focus {
    color: #ffffff;
  }
}

.keep-upload {
  width: 108px;
  height: 40px;
  line-height: 40px;
  display: inline-block;
  margin-left: 10px;
  vertical-align: middle;
  background: #5974ff;
  text-align: center;
  color: #fff;
  border-radius: 6px 6px 6px 6px;

  ::v-deep(.el-upload):focus {
    color: #fff !important;
  }

  &:hover {
    opacity: 0.8;
  }
}
</style>
